<template>
  <Child :msg="msg">
    <div>这个是来自父容器Login页面的内容</div>
  </Child>
  <TodoList></TodoList>
  {{ state.age }}
  <button @click="hanlderClick">点击</button>

  <ul>
    <li v-for="(item, idx) in state.stulist" :key="idx">
      {{ item.num }} -{{ item.name }} -{{ item.age }}
    </li>
  </ul>
</template>

<script lang="ts" setup>
//  import { reactive,ref } from "vue";
import Child from "@/components/Child.vue";
import TodoList from "@/components/TodoList.vue";

defineOptions({
  name: "LoginComponent"
});

const state = reactive({
  num: "00001",
  age: 19,
  stulist: [
    { num: "A0001", name: "jackie", age: Math.floor(Math.random() * 100) },
    { num: "A0002", name: "linda", age: Math.floor(Math.random() * 100) },
    { num: "A0003", name: "susan", age: Math.floor(Math.random() * 100) },
    { num: "A0004", name: "kate", age: Math.floor(Math.random() * 100) }
  ]
});

const msg = ref(`你好-----${Date.now()}`);

const hanlderClick = () => {
  state.age++;
};
</script>

<style scoped lang="scss">
.stu {
  padding: 10px;
  border: 1px solid blue;
}
</style>
